<template>
  <div class="con">
    <header>
      <div class="left" @click="onClickLeft">
        <van-icon name="arrow-left" />
        <p>返回</p>
      </div>
      <div class="center">
        <p>编辑收获地址</p>
      </div>
      <div class="right"></div>
    </header>
    <main>
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :address-info="addressInfo"
        :search-result="searchResult"
        :area-columns-placeholder="columnsplaceholder"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </main>
  </div>
</template>

<script>
import * as api from "../../api/getproductlist";
import areaList from "@/assets/js/area";
export default {
  name: "Updateadress",
  data() {
    return {
      columnsplaceholder: ["请选择", "请选择", "请选择"],
      areaList,
      searchResult: [],

      addressInfo: {
        name: "",
        tel: "",
        // locality:'province'+'city'+'county',
        province: "",
        city: "",
        county: "",
        addressDetail: ""
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSave(cb) {
				let uid=this.$store.state.uids
      api
        .updateaddress({
          uid: uid,
          aid: this.$route.params.id,
          name: cb.name,
          tel: cb.tel,
          locality: cb.province + cb.city + cb.county,
          address: cb.addressDetail
        })
        .then(res => {
          // this.list = res.data.data;
          this.$router.go(-1);
        });
    },
    onDelete() {
      	let uid=this.$store.state.uids
      api.deleteaddress({ uid: uid, aid: this.$route.params.id }).then(res => {
        // this.list = res.data.data;
        this.$router.go(-1);
        this.$toast("删除成功");
      });
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区"
          }
        ];
      } else {
        this.searchResult = [];
      }
    }
  },
  mounted() {
    	let uid=this.$store.state.uids
    api.getaddressinfo({ uid: uid, aid: this.$route.params.id }).then(res => {
      this.addressInfo = {
        name: res.data.data.name,
        tel: res.data.data.tel,
        locality: res.data.data.locality,
        addressDetail: res.data.data.address
      };
    });
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.con {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  height: 66px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  font-size: 14px;
  color: #333333;
}
header .left {
  display: flex;
  align-items: center;
}
header .left p {
  margin-left: 5px;
}
header .center p {
  font-size: 18px;
}
</style>